<template>
  <view class="container">
    <uni-segmented-control
      :current="current"
      :values="items"
      styleType="button"
      @clickItem="onClickItem"
    ></uni-segmented-control>

    <uni-data-select
      v-model="issue"
      :localdata="range"
      @change="handleChange"
    ></uni-data-select>

    <uni-table border stripe emptyText="暂无更多数据">
      <!-- 表头行 -->
      <uni-tr>
        <uni-th align="center" width="60">形态</uni-th>
        <uni-th align="center" width="40">出现次数</uni-th>
        <uni-th align="center" width="40">当前遗漏</uni-th>
        <uni-th align="center" width="40">最大遗漏</uni-th>
        <uni-th align="center" width="40">平均遗漏</uni-th>
        <uni-th align="center">遗漏列表</uni-th>
      </uni-tr>
      <!-- 表格数据行 -->
      <uni-tr v-for="(item, index) in sizeTrendData" :key="index">
        <uni-td>{{ item.sizeForm }}</uni-td>
        <uni-td>{{ item.interval.length }}</uni-td>
        <uni-td>{{ item.trend[0] }}</uni-td>
        <uni-td>{{ Math.max.apply(null, item.trend) }}</uni-td>
        <uni-td>{{
          Math.round(item.trend.reduce((a, v) => a + v, 0) / item.trend.length)
        }}</uni-td>
        <uni-td>{{ item.trend.join("-") }}</uni-td>
      </uni-tr>

      <uni-tr v-for="(item, index) in parityTrendData" :key="index">
        <uni-td>{{ item.parityForm }}</uni-td>
        <uni-td>{{ item.interval.length }}</uni-td>
        <uni-td>{{ item.trend[0] }}</uni-td>
        <uni-td>{{ Math.max.apply(null, item.trend) }}</uni-td>
        <uni-td>{{
          Math.round(item.trend.reduce((a, v) => a + v, 0) / item.trend.length)
        }}</uni-td>
        <uni-td>{{ item.trend.join("-") }}</uni-td>
      </uni-tr>

      <uni-tr v-for="(item, index) in zhiheTrendData" :key="index">
        <uni-td>{{ item.zhiheForm }}</uni-td>
        <uni-td>{{ item.interval.length }}</uni-td>
        <uni-td>{{ item.trend[0] }}</uni-td>
        <uni-td>{{ Math.max.apply(null, item.trend) }}</uni-td>
        <uni-td>{{
          Math.round(item.trend.reduce((a, v) => a + v, 0) / item.trend.length)
        }}</uni-td>
        <uni-td>{{ item.trend.join("-") }}</uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { useDatabase } from "../../hooks/useDatabase";

// 分段器数据
const current = ref(0);
const items = ["排三", "3D"];

const issue = ref(100);
const range = ref([
  { value: 50, text: "近50期" },
  { value: 100, text: "近100期" },
  { value: 150, text: "近150期" },
  { value: 200, text: "近200期" },
]);

const onClickItem = (e) => {
  current.value = e.currentIndex;
  setData(e.currentIndex == 0 ? "ticai" : "fucai");
};

const sizeTrendData = ref([]);
const parityTrendData = ref([]);
const zhiheTrendData = ref([]);

function setData(type) {
  const { getTrend } = useDatabase(type);
  const result = getTrend(issue.value);
  sizeTrendData.value = result.sizeTrendData;
  parityTrendData.value = result.parityTrendData;
  zhiheTrendData.value = result.zhiheTrendData;
}

function handleChange() {
  setData(current.value == 0 ? "ticai" : "fucai");
}

setData("ticai");
</script>

<style lang="scss">
.container {
  .uni-table-td,
  .uni-table-th {
    font-size: 12px;
  }
}
</style>
